<div class="near-wrapper mobile-content-wrapper">
    <label style="float: left"> Near me</label>

    <img style="float: right;max-width: 30px; max-height: 30px" alt="get location"
         src="<?php echo HSUrl::home() . '/images/location_white.png' ?>"/>
    <div class="clear"></div>
</div>

<div class="zip-wrapper mobile-content-wrapper">
    <label style="float:  left">ZIP</label>

    <img style="float: right;max-width: 30px; max-height: 30px" alt="get zip" id="imgNextZip"
         src="<?php echo HSUrl::home() . '/images/arrow-right-white.png' ?>"/>

    <input id="txtZip" type="text" style=" float: right; margin: 0 30px 0;width: 50%"/>

    <div class="clear"></div>
</div>
<script type="text/javascript">
    HS.baseUrl = "<?php echo HSUrl::home()?>";

    function IsValidZipCode(zip) {
        var isValid = /^[0-9]{5}(?:-[0-9]{4})?$/.test(zip);
        if (isValid) {
            document.location = HS.baseUrl + '/map/' + zip;
        }
        else {
            alert('Zip Code không hợp lệ');
        }
    }

    $("#imgNextZip").click(function () {
        var $value = $("#txtZip").val().trim();
        if ($value == '') {
            alert('Vui lòng nhập Zip code');
            return false;
        }
        IsValidZipCode($value);

    });

    $('.near-wrapper').click(function () {
        document.location = HS.baseUrl + '/map/';
    });
</script>